<template>
  <div class="userContainer">

    <!-- 顶部查询导航 -->
    <div class="header">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="用户名称">
              <el-input v-model="page.name"></el-input>
            </el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker v-model="page.createBegin" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker v-model="page.createEnd" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDate">查询</el-button>
              
              <el-button type="primary" @click="reset">清空</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 数据显示 -->
    <div class="content">
        <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="70">
        </el-table-column>

        <el-table-column
          label="序号"
          width="100">
          <template slot-scope="scope">{{ (scope.$index+1)+(page.currentPage-1)*page.pageItems }}</template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="用户名"
          width="200">
        </el-table-column>

        <el-table-column
          label="用户头像"
          width="300">
          <template slot-scope="scope">
            <img class="avatar" :src="scope.row.avatar">
          </template>

        </el-table-column>

        <el-table-column
          label="权限"
          width="100">
          <template slot-scope="scope">{{ scope.row.role.split("_")[0] == "100000" ? "管理员" :  scope.row.role.split("_")[0] == "1000001" ? "普通用户" : "访客"}}</template>
        </el-table-column>
        
        <el-table-column
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- 静态路由跳转,携带id  修改课程-->
            <router-link :to="'/user/info/'+scope.row.id" 
            style="padding-right: 10px;">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </router-link>
             &nbsp;&nbsp; 
            <el-button type="danger" @click="remove(scope.row.id)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-button style="float:right" type="danger" @click="removes" plain>批量删除</el-button>
    </div>

    <!-- 底部分页导航 -->
    <div class="footer">
        <el-pagination style="magi"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pageItems"
        layout="total, sizes, prev, pager, next"
        :total="page.total">
        </el-pagination>
    </div>
  </div>
</template>
<script>
import {pageSelect,deleteUser,deleteUsers} from '@/api/user'
export default {
    data(){
        return {
            list:{},
            page:{
                name:'',
                createBegin: null, //创建时间区间
                createEnd: null,
                currentPage: 1,
                pageItems:10, //每页记录条数
                total:0, 
            },
            multipleSelection: [] //选择记录
        }
    },
    created() {
        //初始化数据
        this.getDate();
    },
    methods: {
      //选择用户
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //删除用户
      remove(id){
        this.$confirm('确认删除?')
          .then(_ => {
            deleteUser(id)
              .then(response=>{
                if(response.data.delete){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.getDate();
                }
            })
            return;
          })
      },
      //批量删除用户
      removes(){
        if(this.multipleSelection[0] == null){
            this.$message('请先选择要删除的用户');
            return;
        }
        this.$confirm('确认删除?')
          .then(_ => {
            var ids = this.multipleSelection.map(item => item.id);
            deleteUsers(ids)
              .then(response=>{
                if(response.data.delete){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.getDate();
                }
              })
          })
      },   
      //记录数变动查询
      handleSizeChange(val) {
        this.getDate();
      },
      //页码变动查询
      handleCurrentChange(val) {
        this.getDate();
      },
      //分页查询
      getDate(){
          pageSelect(this.page)
              .then(response=>{
                this.page.total = response.data.total;
                this.list = response.data.list;
              })
      },
      //重置查询条件
      reset(){
        this.page.name='';
        this.page.createBegin=null;
        this.page.createEnd=null;
        this.getDate();
      }
    }
}
</script>
<style>
.userContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header,
.content,
.footer {
  width: 80%;
  padding: 20px;
  align-content: center;
  text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>